<template>
  <div>
    <div @click="swichVideo">
      切换视频
    </div>
    <div id="dplayer" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      DP: null
    }
  },
  mounted () {
    window.Hls = require('hls.js')
    this.play('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8')
  },
  // beforeDestroy () {
  //   this.DP.destroy() // 销毁
  // },
  methods: {
    play (url) {
      const DPlayer = require('dplayer')
      const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        autoplay: true,
        video: {
          url,
          type: 'hls',
          pic: 'http://n.sinaimg.cn/photo/700/w1000h500/20200825/e3ac-iyhvyuz5730630.jpg', // 视频背景封面
          thumbnails: 'http://n.sinaimg.cn/photo/transform/700/w1000h500/20200714/167a-iwhseiu2028256.jpg'

        },
        pluginOptions: {
          hls: {
          // hls config
          }
        },
        contextmenu: []
      })
      this.DP = dp
      dp.on('ended', () => {
        console.log('player ended')
      })
      dp.on('error', () => {
        console.log('player error')
      })
    },
    swichVideo () {
      this.DP.switchVideo(
        {
          url: '/api/hls/cctv3hd.m3u8'
        }
      )
      this.$nextTick(() => {
        this.DP.play()
      })
    }
  }
}
</script>
